
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { filter, addToDo } from '../actions'
import { List, AddToDo } from '../components/ToDo'

class App extends Component {
	constructor(props){
		super(props)
		this.state = {
			lists: [{text: 'raw'}]
		}
	}
	add(text){
		this.setState(prev => prev.lists.push({ text }))
	}
	render() {
		const { dispatch, todos, filter, addToDo} = this.props
		// console.log(todos)
		return (
			<div>
				<List
					lists=  { todos }
					// onClickToDo = {index =>
						// dispatch(completeTodo(index))
				/>
				<AddToDo
					onAddClick = { addToDo }
				 />
			</div>
		)
	}
}


const mapStateToProps = (state) => ({
    todos: state.todos,
    filter: state.filter
 })

const mapDispatchToProps = (dispatch) => ({
	addToDo: text => dispatch(addToDo)
})


// 包装 component ，注入 dispatch 和 state 到其默认的 connect(mapStateToProps)(App) 中；
export default connect(mapStateToProps, mapDispatchToProps)(App)